//地图容器
//var chart = echarts.init(document.getElementById('mainmap'));

var dom = document.getElementById("mainmap");
var myChart = echarts.init(dom);
var app = {};
var option = null;
myChart.showLoading();


var dataData = {
    "青海省": {
        data: [
            {name: '海西蒙古族藏族自治州', value: 34},
            {name: '玉树藏族自治州', value: 21},
            {name: '果洛藏族自治州', value: 37},
            {name: '海南藏族自治州', value: 57},
            {name: '黄南藏族自治州', value: 32},
            {name: '海北藏族自治州', value: 108},
            {name: '海东市', value: 189},
            {name: '西宁市', value: 221}
        ],
        size: 1000
    }
    ,
    "海西蒙古族藏族自治州": {
        data: [
            {name: '德令哈市', value: 2},
            {name: '都兰县', value: 1},
            {name: '格尔木市', value: 20},
            {name: '天峻县', value: 3},
            {name: '乌兰县', value: 4},
            {name: '海西蒙古族藏族自治州直辖', value: 4}

        ], size: 34
    }
    ,
    "玉树藏族自治州": {
        data: [
            {name: '称多县', value: 2},
            {name: '囊谦县', value: 1},
            {name: '曲麻莱县', value: 2},
            {name: '玉树县', value: 10},
            {name: '杂多县', value: 3},
            {name: '治多县', value: 3}
        ], size: 21
    }
    ,
    "果洛藏族自治州": {
        data: [
            {name: '班玛县', value: 7},
            {name: '达日县', value: 5},
            {name: '甘德县', value: 10},
            {name: '久治县', value: 7},
            {name: '玛多县', value: 2},
            {name: '玛沁县', value: 6}

        ], size: 37
    }
    ,
    "海南藏族自治州": {
        data: [
            {name: '贵德县', value: 12},
            {name: '贵南县', value: 13},
            {name: '同德县', value: 12},
            {name: '兴海县', value: 10},
            {name: '共和县', value: 7}

        ], size: 57
    }
    ,
    "黄南藏族自治州": {
        data: [
            {name: '河南蒙古族自治县', value: 12},
            {name: '尖扎县', value: 6},
            {name: '同仁县', value: 4},
            {name: '泽库县', value: 8}

        ], size: 32
    }
    ,
    "海北藏族自治州": {
        data: [
            {name: '刚察县', value: 34},
            {name: '海晏县', value: 21},
            {name: '祁连县', value: 37},
            {name: '门源回族自治县', value: 13}

        ], size: 108
    }
    ,
    "海东市": {
        data: [
            {name: '平安县', value: 34},
            {name: '民和回族土族自治县', value: 11},
            {name: '循化撒拉族自治县', value: 24},
            {name: '互助土族自治县', value: 27},
            {name: '化隆回族自治县', value: 65},
            {name: '乐都县', value: 20}

        ], size: 189
    }
    ,
    "西宁市": {
        data: [
            {name: '城北区', value: 34},
            {name: '城东区', value: 41},
            {name: '城西区', value: 37},
            {name: '城中区', value: 57},
            {name: '大通回族土族自治县', value: 12},
            {name: '湟源县', value: 7},
            {name: '湟中县', value: 8}
        ], size: 221
    }

};
var configData = {
    "青海省": {
        '海西蒙古族藏族自治州': '海西蒙古族藏族自治州',
        '玉树藏族自治州': '玉树藏族自治州',
        '果洛藏族自治州': '果洛藏族自治州',
        '海南藏族自治州': '海南藏族自治州',
        '黄南藏族自治州': '黄南藏族自治州',
        '海北藏族自治州': '海北藏族自治州',
        '海东市': '海东市',
        '西宁市': '西宁市'
    },
    "海西蒙古族藏族自治州": {
        '德令哈市': '德令哈市',
        '格尔木市': '格尔木市',
        '天峻县': '天峻县',
        '乌兰县': '乌兰县',
        '海西蒙古族藏族自治州直辖': '海西蒙古族藏族自治州直辖'
    },
    "玉树藏族自治州": {
        '称多县': '称多县',
        '囊谦县': '囊谦县',
        '曲麻莱县': '曲麻莱县',
        '玉树县': '玉树县',
        '杂多县': '杂多县',
        '治多县': '治多县'
    },
    "果洛藏族自治州": {
        '班玛县': '班玛县',
        '达日县': '达日县',
        '甘德县': '甘德县',
        '久治县': '久治县',
        '玛多县': '玛多县',
        '玛沁县': '玛沁县'
    },
    "海南藏族自治州": {
        '贵德县': '贵德县',
        '贵南县': '贵南县',
        '同德县': '同德县',
        '兴海县': '兴海县',
        '共和县': '共和县'
    },
    "黄南藏族自治州": {
        '河南蒙古族自治县': '河南蒙古族自治县',
        '尖扎县': '尖扎县',
        '同仁县': '同仁县',
        '泽库县': '泽库县'
    },
    "海北藏族自治州": {
        '刚察县': '刚察县',
        '海晏县': '海晏县',
        '祁连县': '祁连县',
        '门源回族自治县': '门源回族自治县'
    },
    "海东市": {
        '平安县': '平安县',
        '民和回族土族自治县': '民和回族土族自治县',
        '循化撒拉族自治县': '循化撒拉族自治县',
        '互助土族自治县': '互助土族自治县',
        '化隆回族自治县': '化隆回族自治县',
        '乐都县': '乐都县'
    },
    "西宁市": {
        '城北区': '城北区',
        '城东区': '城东区',
        '城西区': '城西区',
        '城中区': '城中区',
        '大通回族土族自治县': '大通回族土族自治县',
        '湟源县': '湟源县',
        '湟中县': '湟中县'
    }
};
var mapdata = [];
$.get('./map/js/qinghai.json', function (geoJson) {
    myChart.hideLoading();
    echarts.registerMap('青海省', geoJson);
    console.log(geoJson);
    mapdata = geoJson;
    renderMap("青海省", dataData["青海省"].data, configData["青海省"], 500);
});

function showTime() {
    var nowtime = new Date();
    var year = nowtime.getFullYear();
    var month = nowtime.getMonth() + 1;
    var date = nowtime.getDate();
    var hh = nowtime.getHours();
    var mm = nowtime.getMinutes();
    var ss = nowtime.getSeconds();

    if (hh < 10) {
        hh = "0" + hh;
    }
    if (ss < 10) {
        ss = "0" + ss;
    }
    if (mm < 10) {
        mm = "0" + mm;
    }
    if (document.getElementById("date")){
        document.getElementById("date").innerText = year + "年" + month + "月" + date + "日  ";
        document.getElementById("date2").innerText = hh + ":" + mm + ":" + ss + "  ";
    }else {
        clearInterval(iCount);
    }

}
var iCount = setInterval("showTime()", 1000);


var provinces = {
    //23个省
    "青海省": "青海省"

};

//地图点击事件
myChart.on('click', function (params) {
    console.log(params);
    console.log(params.seriesName);

    if (params.seriesName in provinces) {
        console.log(111);

        //显示县级地图
        $.getJSON('./map/json/' + params.name + '.json', function (data) {
            console.log(data);
            echarts.registerMap(params.name, data);

            renderMap(params.name, dataData[params.name].data, configData[params.name], dataData[params.name].size);
        });
        //}
    } else {
        console.log(222);
        echarts.registerMap('青海省', mapdata);
        renderMap("青海省", dataData["青海省"].data, configData["青海省"], 500);
    }
});


function renderMap(map, dataData, configData, size) {

    option = {
        title: {
            text: '',
            //subtext: 'data from jinzh',
            left: 'center',
            textStyle: {
                color: '#fff',
                fontSize: 30
            }
        },
        tooltip: {
            trigger: 'item',
            formatter: '{b}<br/>{c} 个创新企业'
        },
        toolbox: {
            show: false,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
                dataView: {readOnly: false},
                restore: {},
                saveAsImage: {}
            }
        },
        visualMap: {
            min: 1,
            max: parseInt(size * 0.8),
            text: ['高', '低'],
            realtime: false,
            calculable: true,
            inRange: {
                color: ['lightskyblue', 'yellow', 'orangered']
            },
            textStyle: {
                color: "#fff"
            },
            left: 10,
            bottom: 30

        },
        series: [

            {
                name: map,
                type: 'map',
                mapType: map, // 自定义扩展图表类型
                color: "#fff",
                itemStyle: {
                    normal: {
                        areaColor: '#323c48',
                        //borderColor: '#fff',
                        areaStyle: {color: 'green'},

                        label: {show: true}
                    },
                    emphasis: {label: {show: true}}
                },
                data: dataData,
                // 自定义名称映射
                nameMap: configData
            }
        ]
    };

    myChart.setOption(option, true);
}

//漏斗图
var option2 = {
    title: {
        text: '',
        subtext: ''
    },
    colorStops: [{
        offset: 0, color: 'rgba(102,255,255,0.6)' // 0% 处的颜色
    }, {
        offset: 0.5, color: '#fff'  // 50% 处的颜色
    }, {
        offset: 1, color: 'rgba(102,255,255,0.6)' // 100% 处的颜色
    }],
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c}%"
    },
    //toolbox: {
    //    feature: {
    //        dataView: {readOnly: false},
    //        restore: {},
    //        saveAsImage: {}
    //    }
    //},
    legend: {
        data: ['展现', '点击', '访问', '咨询', '订单']
    },
    calculable: true,
    series: [
        {
            name: '',
            type: 'funnel',
            left: '0%',
            top: 0,
            //x2: 80,
            bottom: 10,
            width: '100%',
            // height: {totalHeight} - y - y2,
            min: 0,
            max: 100,
            minSize: '0%',
            maxSize: '100%',
            sort: 'ascending',
            gap: 2,

            label: {
                normal: {
                    show: true,
                    position: 'inside'
                },
                emphasis: {
                    textStyle: {
                        fontSize: 16
                    }
                }
            },
            labelLine: {
                normal: {
                    length: 10,
                    lineStyle: {
                        width: 1,
                        type: 'solid'
                    }
                }
            },
            itemStyle: {
                normal: {
                    borderColor: '#fff',
                    borderWidth: 1
                }
            },
            toolbox: { //可视化的工具箱
                show: false,
                feature: {
                    dataView: { //数据视图
                        show: true
                    },
                    restore: { //重置
                        show: true
                    },
                    dataZoom: { //数据缩放视图
                        show: true
                    },
                    saveAsImage: {//保存图片
                        show: true
                    },
                    magicType: {//动态类型切换
                        type: ['bar', 'line']
                    }
                }
            },
            color: ['#FF0000', '#FFFF00', 'blue', '#33ffff', '#0000ff'],
            data: [

                {value: 20, name: '众创空间'},
                {value: 40, name: '创客青海'},

                {value: 60, name: '创族空间'}
            ]
        }
    ]
};

var dom2 = document.getElementById("data1");
var myChart2 = echarts.init(dom2);

myChart2.setOption(option2, true);